<template>
  <div class="page">
     <template v-if="resultList.length">
    <div class="weui-cells cartitem" v-for="(item,index) in resultList" :key="index">
      <div class="weui-cell" style="display: flex;align-items: center;">
        <div class="weui-cell__hd" >
         <!-- <radio color="#FF787E"  value="111" checked="true" /> -->
         <!-- <van-checkbox :value="allValue" checked-color="#FF787E" @change="onChange"></van-checkbox> -->
          <van-icon :name="item.isClick"  @click="chengItemIcon(item,index)" size='1.3em' :color="item.isClick=='circle'?'':'#FF787E'"/>
          </div>
        <div class="weui-cell__bd">单项产品</div>
      </div>

      <div class="weui-cell" >
        <div class="weui-cell__hd">
            <van-icon :name="item.isClick"  @click="chengItemIcon(item,index)" size='1.3em' :color="item.isClick=='circle'?'':'#FF787E'"/>
         <!-- <radio color="#FF787E" value="111" checked="true" /> -->
         <!--  <van-checkbox :value="item.isClick" checked-color="#FF787E" @change="onChangeItem($event,item)"></van-checkbox> -->
       <!--  <radio color="#FF787E"  value="111" :checked="item.isClick" @change="onChangeItem($event,item)"/> -->
        </div>
        <div class="weui-cell__hd" @click="goDetail(item)">
          <img :src="item.images" mode="widthFix">
        </div>
        <div class="weui-cell__bd">
          <div class="cartitem_title">{{item.spName}}</div>
          <div class="cartitem_number">{{item.qty}}次</div>
          <div class="weui-flex">
            <div class="weui-flex__item cartitem_price">￥{{item.xsdj*0.01}}</div>
            <div class="numberbox">
             <!-- <a href="#" class="plus">-</a>
              <input type="text" :value="item.qty">
              <a href="#" class="sub">+</a> -->
               <i-input-number  :value="item.qty" min="0" max="1000" @change="handleChange1($event,item,index)" />
            </div>
          </div>
        </div>
      </div>

    </div>
      </template>
    <!--购物车空-->
    <div class="cartnone" v-if="!resultList.length">
      <img src="../../../static/images/cartnone.png" mode="widthFix">
      <p>再忙也要关心自己</p>
      <a @click="goPro">去逛逛</a>
    </div>
    <div class="settlement weui-flex">
      <div class="weui-flex__item total">
        <van-icon :name="iconNameAll"  @click="chengIconALl" size='1.3em' :color="iconNameAll=='circle'?'':'#FF787E'"/>
        <span class="total_label">全选({{resultList.length}})</span>
        <span class="total_number">合计：<span>￥{{total}}</span></span>
      </div>
      <a class="settlement_btn" @click="getOrder" >去结算</a>
    </div>
  </div>
</template>

<script>
import * as appId from "@/utils/util"
export default {
  data () {
    return {
      current: 0,
      // phone:JSON.parse(wx.getStorageSync('userInfo')).mobileNo,
       iconName:'checked',
       iconNameAll:"checked",
      pageNo:1,
      checkBoxList:[],
      total:0,
      allValue:true,//总的checkbox
      allValueItem:"",
      pageSize:10,
      resultList:[]
    }
  },
  comments:{

  },
  computed:{

  },
   onPullDownRefresh(){
     console.log('down')
      if(this.result.length){
     this.pageNo++;
    }
     this.getRequest()

  },
  created() {

  },
  onShow(){
     wx.setNavigationBarTitle({
       title: "购物车"
     })
    this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
    if(this.userInfo) {
      this.phone=this.userInfo.mobileNo;
      this.userId=this.userInfo.baseUserId;
      //this. getList(0)
      this.getRequest()


    }else{
      wx.showToast({
        title:'请先登录',
        icon: 'none',
        duration: 2000
      })
    }
  },

  methods: {
    goPro(){

        let url="/pages/product/main";
        wx.navigateTo({ url })
    },
    getOrder(){
      if(this.resultList.length){
         let arr=this.resultList.filter((item)=>{
           return item.isClick=='checked'
         })
         let url="/pages/commit/main";
          wx.setStorageSync('isTuangou', 0);
           wx.setStorageSync('payShow',JSON.stringify(arr))
        wx.setStorageSync('cartData', JSON.stringify(arr))
          wx.navigateTo({ url })
      }

    },
    goDetail(item){
       let url="/pages/productdetail/main?id="+item.spId;
      wx.navigateTo({ url })
    },
    handleChange1($event,item,index){
      console.log($event.target.value)
      this.resultList.forEach((a,i)=>{
        if(a.id==item.id){
          a.qty=$event.target.value
        }
      })
        this.$set(this.resultList,this.resultList[index],item)
      this.$forceUpdate();
        this. getTotal();
    },
    chengIconALl(){//全选
       if(this.iconNameAll=='circle'){
         this.iconNameAll='checked'

       }else if(this.iconNameAll=='checked'){
         this.iconNameAll='circle'
       }
       this.resultList.forEach((a,i)=>{
         a.isClick=this.iconNameAll;
         this.$set(this.resultList,i,a)
       })
        this.$forceUpdate();
         this. getTotal();
    },
    chengIcon(){//单选
        if(this.iconName=='circle'){
        this.iconName='checked'
      }else if(this.iconName=='checked'){
        this.iconName='circle'

      }

    },
    chengItemIcon(item,index){//商品选择
           if(item.isClick=='circle'){
              item.isClick="checked"
           }else if(item.isClick=='checked'){
             item.isClick="circle"
           }
       let isCircle=this.resultList.some((item)=>{
        return item.isClick=='circle'
      })
      let isChecked=this.resultList.every((item)=>{
        return item.isClick=='checked'
      })
      if(isCircle){
         this.iconNameAll='circle'
      }
      if(isChecked){
          this.iconNameAll='checked'
      }
        console.log(item)
       this.$set(this.resultList,this.resultList[index],item)
       this.$forceUpdate();
       console.log(this.resultList)
       this. getTotal();
    },

    getTotal(){
         this.total=0;
       this.resultList.forEach((a,i)=>{
        if(a.isClick=='checked'){
          this.total+=a.qty*a.xsdj*0.01;
        }

      })

    },
    getRequest(){
      let that=this;
         this.$http.request({
                    method:"post",
                    url:"/v1.0/appletLogin/myCar",
                    body:{
                      "phone":that.phone,
                      "appid":appId.appId,
                      "pageNo":that.pageNo,
                      "pageSize":that.pageSize,

            }
          }).then((data)=>{
            if(data.code==0){
              that.result=data.result;
               if (that.pageNo > 1) {
                that.resultList.push(...data.result)

                }else{
                  that.resultList=data.result;
                }
                   that.resultList.forEach((a,i)=>{
                     a.isClick='checked';
                   })
                    this. getTotal();
                console.log(that.resultList)
                if(!data.length){
                wx.stopPullDownRefresh();
               //  wx.showToast({
               //  title: '暂无更多数据',
               //  icon: 'none',
               //  duration: 2000
               // })
              }
            }else{
               wx.showToast({
               title: `${data.message}`,
               icon: 'none',
               duration: 2000
              })
            }
          }).catch((err)=>{
              wx.showToast({
              title: "请求失败",
              icon: 'none',
              duration: 2000
            })
          })
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.page{
  padding-bottom: 3em;
}
.cartitem .weui-cell{
  -webkit-box-align: inherit;
  -webkit-align-items: inherit;
  align-items: inherit;
}
.cartitem img{
  width: 5em;
  height: 5em;
  margin-right: 0.6em;
  border-radius: 0.3em;
}
.numberbox{
  width: 270rpx;
  height: 60rpx;
  position: relative;
  text-align: center;
}
.numberbox .plus{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 58rpx;
  height: 60rpx;
  line-height: 60rpx;
  border: 1px #aaa solid;
  border-radius: 5rpx 0px 0px 5rpx;
}
.numberbox .sub{
  position: absolute;
  right: 0px;
  top: 0px;
  width: 58rpx;
  height: 60rpx;
  line-height: 60rpx;
  border: 1px #aaa solid;
  border-radius: 0px 5rpx 5rpx 0px;
}
.numberbox input{
  height: 60rpx;
  border-top: 1px #aaa solid;
  border-bottom: 1px #aaa solid;
  position: absolute;
  left: 60rpx;
  top: 0px;
  width: 60rpx;
}
.cartitem_number{
  color: #999;
  font-size: 0.7em;
}
.cartitem_price{
  color: #E4393C;
  margin-top: 0.5em;
  font-size: 1em;
}
.settlement{
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #fff;
  border-top: 1px #eee solid;
  height: 3em;
  overflow: hidden;
}
.settlement .settlement_btn{
  background: #FF787E;
  color: #fff;
  text-align: center;
  height: 3em;
  line-height: 3em;
  width: 6em;
}
.total{
  line-height: 3em;
  padding: 0 0.4em;
}
.total .total_label{
  font-size: 0.7em;
  color: #aaa;
  margin-right: 0.4em;
}
.total .total_number{
  font-size: 0.8em;
}
.total .total_number span{
  font-size: 1.4em;
  color: #E4393C;
}
.cartnone{
  text-align: center;
  font-size: 0.8em;
  color: #666;
  padding-top: 3em;
}
.cartnone img{
  width: 35%;
}
.cartnone p{
  padding: 1.4em 0 0.8em 0;
}
.cartnone a{
  border: #FF787E 1px solid;
  border-radius: 1.2em;
  height: 2.4em;
  line-height: 2.4em;
  display: inline-block;
  text-align: center;
  padding: 0 1.2em;
  color: #FF787E;
}
</style>
